﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图像之谜</title>
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/image-puzzle.css" rel="stylesheet" />
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/image-puzzle.js"></script>
</head>
<body>
    <div id="collage">
        <h2>图像之谜</h2>
        <hr />
        <div id="playPanel" style="padding:5px;display:none;">
            <h3 id="imgTitle"></h3> <hr />
            <div style="display:inline-block; margin:auto; width:95%; vertical-align:top;">
                <ul id="sortable" class="sortable"></ul>
                <div id="actualImageBox">
                    <div id="stepBox">
                        <div>步骤:</div><div class="stepCount">0</div>
                    </div>
                    <img id="actualImage" />
                    <div>请将碎片拼凑成这样一个完整画面</div>
                    <p id="levelPanel">
                        <input type="radio" name="level" id="easy" checked="checked" value="3" /> <label for="easy">简单</label>
                        <input type="radio" name="level" id="medium" value="4" /> <label for="medium">中等</label>
                        <input type="radio" name="level" id="hard" value="5" /> <label for="hard">困难</label>
                    </p>
                    <div>
                        <button id="btnRule" type="button" class="btn" onclick="rules();">规则</button>
                        <button id="newPhoto" type="button" class="btn">换一张图片</button>
                        <button id="btnReplay" type="button" class="btn" onclick="about();">关于</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="gameOver" style="display:none;">
            <div style="background-color: #fc9e9e; padding: 5px 10px 20px 10px; text-align: center; ">
                <h2 style="text-align:center">游戏结束!!</h2>
                恭喜!! <br /> 你完成了这张图片
                <br />
                用了 <span class="stepCount">0</span>步.
                <br /><br />
                <div>
                    <button type="button" onclick="window.location.reload(true);">重玩一次</button>
                </div>
            </div>
        </div>

        <script>
            var images = [
                { src: 'images/london-bridge.jpg', title: '伦敦桥' },
                { src: 'images/lotus-temple.jpg', title: '莲花寺' },
                { src: 'images/qutub-minar.jpg', title: '古德高塔' },
                { src: 'images/statue-of-liberty.jpg', title: '自由女神像' },
                { src: 'images/taj-mahal.jpg', title: '泰姬陵' }
            ];

            $(function () {
                var gridSize = $('#levelPanel :radio:checked').val();
                imagePuzzle.startGame(images, gridSize);
                $('#newPhoto').click(function () {
                    imagePuzzle.startGame(images, gridSize);
                });

                $('#levelPanel :radio').change(function (e) {
                    var gridSize = $(this).val();
                    imagePuzzle.startGame(images, gridSize);
                });
            });
            function rules() {
                alert('根据图片提示，将小图片移动到相应的位置来拼凑出完整大图即可胜利');
            }
            function about() {
                alert('【小Q博客小游戏平台】源码下载：www.xiaoqbk.com');
            }
        </script>
    </div>
</body>
</html>